<template>
  <div id="g2HierarchyNode" ref="g2HierarchyNode"
      :style="'width:'+width+';height: '+height"></div>
</template>
<script>
import DataSet from '@antv/data-set';
import {Chart} from '@antv/g2';
import obConstants from '@/assets/js/obConstants';
import {isNull} from "@/assets/js/utils/validate";

export default {
  name: "yqArticleChartMindMapG2",
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    treeData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  computed: {},
  methods: {
    initG2Hierarchy() {
      /* ================================================================================
       * https://antv-g2.gitee.io/zh/examples/relation/relation#radial-dendrogram
       * ================================================================================ */
      let g2HierarchyNode = this.$refs.g2HierarchyNode;
      let width = g2HierarchyNode.offsetWidth;
      let height = g2HierarchyNode.offsetHeight;
      const dv = new DataSet.View().source(this.treeData, {
        type: 'hierarchy'
      });
      dv.transform({
        // type: 'hierarchy.tree' // 紧凑树
        type: 'hierarchy.cluster' // 均衡树
      });

      const chart = new Chart({
        container: 'g2HierarchyNode',
        autoFit: true,
        width,
        height,
        padding: [80, 10, 80, 10],
      });
      // 是否显示坐标轴。
      chart.axis(false);
      // 悬浮框
      chart.tooltip({
        title: 'name', // title显示字段
      });
      // 是否显示图例。
      chart.legend(false);
      // 配置坐标系
      chart.coordinate('polar');
      // 度量（Scale）用于定义数据的类型和展示方式
      chart.scale({
        x: {
          nice: true,
          sync: true,
        },
        y: {
          nice: true,
          sync: true,
        },
      });

      // 连线部分设置
      const edgeView = chart.createView();
      edgeView.data(dv.getAllLinks().map(link => ({
        x: [link.source.x, link.target.x],
        y: [link.source.y, link.target.y],
        source: link.source.name,
        target: link.target.id
      })));
      edgeView.edge()
          .position('x*y')
          // .shape('smooth') // 直线或曲线
          .tooltip('') // 连线无tooltip
          .color('grey')
          .style({
            strokeOpacity: 0.2, // 连线的粗细
          });

      // 节点部分设置
      const nodeView = chart.createView();

      nodeView.data(dv.getAllNodes().map(node => {
          return {
            name: node.data.title,
            parentTitle: isNull(node.data.parent_title) ? '无' : node.data.parent_title,
            // value: node.value,
            slug: node.data.slug,
            x: node.x,
            y: node.y
          }
        })
      );

      nodeView.point()
        .position('x*y')
        .tooltip('parentTitle',(parentTitle) => {
          return {
            name: '所属',
            value: parentTitle
          };
        })
        .color('grey')
        .label('name', (value) => {
          let v = value;
          if (value) {
            v = v.replaceAll("】", "】\n");
          }
          return {
            content: v
          }
        }, {
          offset: 10, // 相对数据点的偏移距离。
          labelEmit: true, // 只对极坐标下的文本生效，表示文本是否按照角度进行放射状显示，true 表示开启，false 表示关闭。
          style: {
            fill: '#dadada',
            fontSize: 11,
          }
        });


      nodeView.on('click', (ev) => {
        const target = ev.target;
        if (target.cfg.type === "text") {
          if (target.cfg.data.slug !== '#') {
            window.open(obConstants.USER.YUQUE_HOME + "/" + target.cfg.data.slug);
          }
        }

        if (target.cfg.type === "marker") {
          if (target.cfg.origin.data.slug !== '#') {
            window.open(obConstants.USER.YUQUE_HOME + "/" + target.cfg.origin.data.slug);
          }
        }
      });

      chart.render();
    }
  },
}
</script>
<style scoped lang='scss'>

</style>
